<template>
	<el-form :model="formData" label-width="auto" :style="{ maxwWidth: '600px' }" ref="ruleFormRef" :inline="inline">
		<el-form-item :label="item.label" v-for="(item, index) in formConfig" :key="index" :prop="item.key">
			<template v-if="item.ele == 'select'">
				<el-select v-model="formData[item.key]" :multiple="item.multiple" :placeholder="item.placeholder" :disabled="item.disabled" :clearable="item.clearable" @change="item.change">
					<template v-for="(itema, indexa) in item.options" :key="indexa">
						<el-option :label="itema.label" :value="itema.value"></el-option>
					</template>
				</el-select>
			</template>
			<template v-else-if="item.ele == 'input'">
				<el-input v-model="formData[item.key]" :placeholder="item.placeholder" :disabled="item.disabled" :clearable="item.clearable" :show-password="item.pwd" :type="item.type" @change="item.change" @input="item.input" :style="item.style"></el-input>
			</template>
			<template v-else-if="item.ele == 'input_number'">
				<el-input-number v-model="formData[item.key]" :disabled="item.disabled" :min="item.min" :max="item.max" @change="item.change"> </el-input-number>
			</template>
			<template v-else-if="item.ele == 'cascader'">
				<el-cascader v-model="formData[item.key]" :options="item.options" @change="item.change" :placeholder="item.placeholder" :disabled="item.disabled" :clearable="item.clearable" />
			</template>
			<template v-else-if="item.ele == 'checkbox'">
				<el-checkbox-group v-model="formData[item.key]" size="small">
					<template v-for="(itemb, indexb) in item.options" :key="indexb">
						<el-checkbox :label="itemb.label" :value="itemb.value" :border="itemb.border" />
					</template>
				</el-checkbox-group>
			</template>
			<template v-else-if="item.ele == 'radio'">
				<el-radio-group v-model="formData[item.key]">
					<template v-for="(itemc, indexc) in item.options" :key="indexc">
						<el-radio :value="itemc.value" size="large">{{ itemc.label }}</el-radio>
					</template>
				</el-radio-group>
			</template>
			<template v-else-if="item.ele == 'switch'">
				<el-switch v-model="formData[item.key]" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
			</template>
		</el-form-item>
		<el-form-item>
			<template v-if="btn == 'custom'">
				<slot></slot>
			</template>
			<template v-else>
				<div style="width: 100%; display: flex; justify-content: center; align-items: center">
					<el-button type="primary" @click="submitForm(ruleFormRef)"> 确认 </el-button>
					<el-button @click="$emit('cancel')"> 取消 </el-button>
				</div>
			</template>
		</el-form-item>
	</el-form>
</template>

<script setup>
	const prop = defineProps({
		formData: {
			type: Object,
			default: () => ({}),
		},
		formConfig: {
			type: Array,
			default: () => [],
		},
		inline: { type: Boolean, default: false },
		btn: {
			type: String,
			default: 'default',
		},
	});
	const ruleFormRef = ref();
	const emit = defineEmits(['submit', 'cancel']);
	const submitForm = async formEl => {
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				emit('submit');
				console.log('submit!');
			} else {
				console.log('error submit!', fields);
			}
		});
	};
</script>

<style scoped lang="scss"></style>
